<template>

    <el-menu
            default-active="/sys/users"
            class="el-menu-vertical-demo"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b">

        <router-link to="/index">
            <el-menu-item index="/index">
                <template slot="title">
                    <i class="el-icon-s-home"></i>
                    <span slot="title">首页</span>
                </template>
            </el-menu-item>
        </router-link>

        <el-submenu :index="menu.path" v-for="menu in menuList">

            <template slot="title">
                <i :class="menu.icon"></i>
                <span>{{menu.title}}</span>
            </template>

            <router-link :to="item.path" v-for="item in menu.children">
                <el-menu-item :index="item.path">
                    <template slot="title">
                        <i :class="item.icon"></i>
                        <span slot="title">{{item.title}}</span>
                    </template>
                </el-menu-item>
            </router-link>
        </el-submenu>

    </el-menu>
</template>

<script>
    export default {
        name: "SideMenu",
        data() {
            return {
                menuList: [
                    {
                        title: '系统管理',
                        icon: 'el-icon-s-operation',
                        path: '',
                        children: [
                            {
                                title: '用户管理',
                                icon: 'el-icon-s-custom',
                                path: '/sys/users',
                                children: []
                            },
                            {
                                title: '角色管理',
                                icon: 'el-icon-rank',
                                path: '/sys/roles',
                                children: []
                            },
                            {
                                title: '菜单管理',
                                icon: 'el-icon-menu',
                                path: '/sys/menus',
                                children: []
                            },
                            {
                                title: '权限管理',
                                icon: 'el-icon-s-promotion',
                                path: '/sys/permissions',
                                children: []
                            }
                        ]
                    },
                    {
                        title: '系统工具',
                        icon: 'el-icon-s-tools',
                        path: '',
                        children: [
                            {
                                title: '代码生成',
                                icon: 'el-icon-files',
                                path: '/tools/1',
                                children: []
                            },
                            {
                                title: '数字字典',
                                icon: 'el-icon-s-order',
                                path: '/tools/2',
                                children: []
                            },
                        ]
                    }
                ]
            }
        },
        methods: {



        }
    }
</script>

<style scoped>
    .el-menu-vertical-demo {
        height: 100%;
    }
    a{
        text-decoration:none;
    }
</style>